<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>i到位年会评分系统</title>
	<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
	<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
	<!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
	<script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
	<style>
		*{
			margin:0;
			padding:0;
		}
		html,body{
			height:100%;
		}
		.fontColor{color: #00bfff;}
		body{
			background: url("./bg1.png");
			background-size: contain; ;
			background-repeat: no-repeat;
			background-position: center;
			background-color:#c32d15;
		}
		.box{
			position: absolute;
			left:50%;
			right:100px;
			bottom: 130px;
			height:500px;
			display: flex;
		}
		.wrap{
			position: relative;
			height: 100%;
			flex:1;
		}
		.wrap .text{
			position: absolute;;
			left:20px;
			right:20px;
			bottom:0;
			height:50px;
			line-height: 50px;
			color:#fff;
			text-align: center;
			font-size: 16px;
			font-weight: bold;
		}
		.wrap .value{
			position: absolute;
			left:20%;
			right:20%;
			bottom: 50px;
			background: #ececec;
			line-height: 100%;
			font-size: 16px;
			color:red;
			text-align: center;
			height:5px;
			max-height: 380px;
			transition: all 2s;
			-moz-transition: all 2s; /* Firefox 4 */
			-webkit-transition: all 2s; /* Safari 和 Chrome */
			-o-transition: all 2s; /* Opera */
		}
		.wrap .value .num{
			position: absolute;
			top:-24px;
			left:0;
			width:100%;
			font-weight: bold;
			font-size: 36px;
			color:#fff;
		}
		.wrap .value .num.active{
			color:deepskyblue;
		}
	</style>
</head>
<body>
	<div class="row box" id="box"></div>
</body>
<script src="js/client.js"></script>
</html>